import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Pressable,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { useAppContext } from '../context/AppContext';
import { useTheme } from '../context/ThemeContext';
import { createThemedStyles, getDarkThemeEnhancements, getEmptyEnhancements } from '../utils/themeStyles';
import LatestNews from '../components/LatestNews';
import LatestTasks from '../components/LatestTasks';
import { TabScreenProps } from '../types';

const HomeScreen: React.FC<TabScreenProps<'Home'>> = () => {
  const navigation = useNavigation();
  const { state } = useAppContext();
  const { theme, isDark } = useTheme();
  
  // 创建主题样式
  const themedStyles = createThemedStyles(theme);
  const darkEnhancements = isDark ? getDarkThemeEnhancements(theme) : getEmptyEnhancements();
  
  // 统计数据
  const totalTasks = state.tasks.length;
  const completedTasks = state.tasks.filter(task => task.completed).length;
  const totalNews = state.news.length;
  const unreadNews = state.news.filter(news => !news.read).length;
  
  return (
    <ScrollView 
      style={[themedStyles.container, styles.container]}
      showsVerticalScrollIndicator={false}
    >
      {/* 欢迎区域 */}
      <View style={styles.welcomeSection}>
        <Text style={[themedStyles.title, styles.welcomeTitle]}>
          👋 欢迎回来！
        </Text>
        <Text style={[themedStyles.body, styles.welcomeSubtitle]}>
          今天是美好的一天，让我们开始工作吧
        </Text>
      </View>
      
      {/* 统计卡片 */}
      <View style={[themedStyles.elevatedCard, styles.statsContainer, styles.elevatedCardShadow]}>
        <Text style={[themedStyles.subtitle, styles.statsTitle]}>📊 今日概览</Text>
        <View style={styles.statsGrid}>
          <View style={styles.statItem}>
            <Text style={[themedStyles.headline, styles.statNumber, { color: theme.primary }]}>
              {completedTasks}
            </Text>
            <Text style={[themedStyles.label, styles.statLabel]}>已完成任务</Text>
          </View>
          <View style={styles.statItem}>
            <Text style={[themedStyles.headline, styles.statNumber, { color: theme.secondary }]}>
              {totalTasks - completedTasks}
            </Text>
            <Text style={[themedStyles.label, styles.statLabel]}>待办任务</Text>
          </View>
          <View style={styles.statItem}>
            <Text style={[themedStyles.headline, styles.statNumber, { color: theme.accent }]}>
              {unreadNews}
            </Text>
            <Text style={[themedStyles.label, styles.statLabel]}>未读资讯</Text>
          </View>
        </View>
      </View>
      
      {/* 功能卡片 */}
      <View style={styles.featuresSection}>
        <Text style={[themedStyles.subtitle, styles.sectionTitle]}>🚀 快速功能</Text>
        <View style={styles.featuresGrid}>
          <TouchableOpacity
            style={[themedStyles.card, styles.featureCard, styles.cardShadow]}
            onPress={() => navigation.navigate('Todo' as never)}
            activeOpacity={0.7}
          >
            <Text style={styles.featureIcon}>📝</Text>
            <Text style={[themedStyles.body, styles.featureTitle]}>任务管理</Text>
            <Text style={[themedStyles.label, styles.featureDesc]}>管理您的待办事项</Text>
          </TouchableOpacity>
          
          <TouchableOpacity
            style={[themedStyles.card, styles.featureCard, styles.cardShadow]}
            onPress={() => navigation.navigate('News' as never)}
            activeOpacity={0.7}
          >
            <Text style={styles.featureIcon}>📰</Text>
            <Text style={[themedStyles.body, styles.featureTitle]}>最新资讯</Text>
            <Text style={[themedStyles.label, styles.featureDesc]}>查看最新新闻</Text>
          </TouchableOpacity>
          
          <TouchableOpacity
            style={[themedStyles.card, styles.featureCard, styles.cardShadow]}
            onPress={() => navigation.navigate('PomodoroTimer' as never)}
            activeOpacity={0.7}
          >
            <Text style={styles.featureIcon}>⏰</Text>
            <Text style={[themedStyles.body, styles.featureTitle]}>专注计时</Text>
            <Text style={[themedStyles.label, styles.featureDesc]}>番茄钟计时器</Text>
          </TouchableOpacity>
        </View>
      </View>
      
      {/* 快速操作 */}
      <View style={[themedStyles.elevatedCard, styles.quickActions, styles.elevatedCardShadow]}>
        <Text style={[themedStyles.subtitle, styles.sectionTitle]}>⚡ 快速操作</Text>
        <View style={styles.actionButtons}>
          <Pressable
            style={[styles.actionButton, { backgroundColor: theme.primary }]}
            onPress={() => navigation.navigate('Todo' as never)}
          >
            <Text style={[styles.actionButtonText, { color: theme.onPrimary }]}>
              ➕ 添加任务
            </Text>
          </Pressable>
          
          <Pressable
            style={[styles.actionButton, { backgroundColor: theme.secondary }]}
            onPress={() => navigation.navigate('PomodoroTimer' as never)}
          >
            <Text style={[styles.actionButtonText, { color: theme.onSecondary }]}>
              ▶️ 开始专注
            </Text>
          </Pressable>
        </View>
      </View>
      
      {/* 最新任务 */}
      <LatestTasks />
      
      {/* 最新资讯 */}
      <LatestNews />
      
      {/* 底部间距 */}
      <View style={styles.bottomSpacing} />
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  
  welcomeSection: {
    paddingHorizontal: 20,
    paddingTop: 20,
    paddingBottom: 24,
  },
  
  welcomeTitle: {
    marginBottom: 8,
  },
  
  welcomeSubtitle: {
    // 样式由themedStyles.body提供
  },
  
  statsContainer: {
    marginHorizontal: 20,
    marginBottom: 24,
  },
  
  statsTitle: {
    marginBottom: 16,
  },
  
  statsGrid: {
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  
  statItem: {
    alignItems: 'center',
  },
  
  statNumber: {
    marginBottom: 4,
  },
  
  statLabel: {
    textAlign: 'center',
  },
  
  featuresSection: {
    paddingHorizontal: 20,
    marginBottom: 24,
  },
  
  sectionTitle: {
    marginBottom: 16,
  },
  
  featuresGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  
  featureCard: {
    width: '48%',
    alignItems: 'center',
    paddingVertical: 20,
    marginBottom: 12,
  },
  
  featureIcon: {
    fontSize: 32,
    marginBottom: 8,
  },
  
  featureTitle: {
    fontWeight: '600',
    marginBottom: 4,
    textAlign: 'center',
  },
  
  featureDesc: {
    textAlign: 'center',
  },
  
  quickActions: {
    marginHorizontal: 20,
    marginBottom: 24,
  },
  
  actionButtons: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  
  actionButton: {
    flex: 1,
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderRadius: 8,
    marginHorizontal: 4,
    alignItems: 'center',
  },
  
  actionButtonText: {
    fontSize: 14,
    fontWeight: '600',
  },
  
  bottomSpacing: {
    height: 20,
  },
  
  // 针对不同元素的优化阴影效果
  cardShadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 }, // 原来 height: 2，缩小50%
    shadowOpacity: 0.1, // 保持原有透明度
    shadowRadius: 2, // 原来 shadowRadius: 4，缩小50%
    elevation: 1.5, // 原来 elevation: 3，缩小50%
  },
  
  elevatedCardShadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 }, // 原来 height: 4，缩小50%
    shadowOpacity: 0.15, // 保持原有透明度
    shadowRadius: 4, // 原来 shadowRadius: 8，缩小50%
    elevation: 3, // 原来 elevation: 6，缩小50%
  },
});

export default HomeScreen;